<template>
	<div class="page-container">
		<el-card class="page-card" :body-style="{ padding: '32px !important' }">
			<div class="flex flex-col page-h-full">
				<div v-loading="loading" class="banner flex-1">
					<div class="banner__upload mr-[24px]">
						<div class="icon-box mt-[70px]">
							<el-upload ref="uploadRef" :before-upload="beforeUpload" :action="uploadImgUrl" :headers="headers" :limit="1" :show-file-list="false" :on-success="onSuccessUpload">
								<svg-icon icon-class="add" size="48px" color="#4C59C6"></svg-icon>
							</el-upload>
						</div>
						<div class="text-box">
							<div class="mr-[7px] text-[14px] text-[#4C59C6]">
								新增海报
								<el-tooltip effect="dark" placement="top" popper-class="tips">
									<div slot="content">推广海报推荐尺寸<br />600*1065</div>
									<svg-icon icon-class="wenhao" color="#4C59C6" size="14px"></svg-icon
								></el-tooltip>
							</div>
						</div>
						<div class="tip-box">
							<div class="xian text-[#4C59C6]">220</div>
							<div class="center text-[12px] text-[#4C59C6]">
								<div>二维码尺寸</div>
								<div>160*160</div>
							</div>
							<div class="xian text-[#4C59C6]">220</div>
						</div>
						<div class="bottom-xian text-[#4c59c6]">160</div>
					</div>
					<div v-for="(item, index) in data" :key="item.id" :data-id="item.id" class="banner__item">
						<span class="serial">{{ index + 1 }}</span>
						<el-card :body-style="{ padding: '0px !important' }" shadow="hover" class="w-full !border-none">
							<div class="banner_item_info">
								<el-image :src="item.shareUrl" class="image"></el-image>
							</div>
							<div class="divOperation">
								<span class="spanDelete" @click="handleDelete(item)">删除</span>
							</div>
						</el-card>
					</div>
				</div>
			</div>
		</el-card>
	</div>
</template>

<script>
import { getToken } from '@/utils/auth';
export default {
	name: 'Poster',
	data() {
		return {
			uploadImgUrl: process.env.VUE_APP_BASE_API + '/common/upload',
			headers: {
				Authorization: 'Bearer ' + getToken(),
			},
			loading: false,
			queryParams: {
				pageNum: 1,
				pageSize: 3,
				type: 1,
			},
			data: [],
		};
	},
	created() {
		this.getList();
	},
	methods: {
		getList() {
			this.loading = true;
			this.$request
				.post('/system/poster/list', this.queryParams)
				.then((response) => {
					this.data = response.data;
				})
				.finally(() => {
					this.loading = false;
				});
		},
		beforeUpload() {
			return this.data.length < 3;
		},
		onSuccessUpload(res) {
			if (res.data) {
				this.fileUrl = res.data.url;
				this.createPic();
			} else {
				this.$message.error(res.msg);
			}
		},
		createPic() {
			this.$request
				.post('/system/poster/add', {
					shareUrl: this.fileUrl,
					type: 1,
				})
				.then(() => {
					this.$message.success('新增成功');
					this.$refs.uploadRef.clearFiles();
					this.getList();
				});
		},
		handleDelete(row) {
			this.$dialogRemove('是否删除该海报?').then((res) => {
				this.$request
					.post('/system/poster/remove', { id: [row.id] })
					.then(() => {
						this.$message.success('删除成功');
						setTimeout(() => {
							this.getList();
							res.hide();
							res.loading(false);
						}, 100);
					})
					.catch(() => {
						res.hide();
						res.loading(false);
					});
			});
		},
	},
};
</script>

<style lang="scss" scoped>
.banner {
	&::after {
		content: '';
		clear: both;
	}
	.banner__item {
		margin-bottom: 24px;
		width: 180px;
		height: 320px;
		margin-right: 24px;
		float: left;
		border-radius: 12px;
		overflow: hidden;
		position: relative;
		.serial {
			position: absolute;
			transition: 0.5s;
			width: 32px;
			height: 32px;
			background: rgba(0, 0, 0, 0.5);
			border-radius: 50%;
			top: 12px;
			left: 12px;
			color: #ffffff;
			z-index: 10;
			text-align: center;
			line-height: 32px;
			font-size: 16px;
		}
		.banner_item_info {
			display: flex;
			justify-content: space-between;
			height: 320px;
			width: 180px !important;
			.image {
				width: 180px !important;
				height: 320px;
				cursor: pointer;
			}
			.divText {
				width: 156px;
				h3 {
					margin: 0;
				}
			}
		}
		&:hover {
			.divOperation {
				opacity: 1;
			}
		}
		.divOperation {
			width: 180px;
			height: 320px;
			display: flex;
			position: absolute;
			align-items: center;
			top: 0;
			left: 0;
			opacity: 0;
			background: rgba(0, 0, 0, 0.5);
			transition: 0.5s;
			z-index: 1;
			.spanModify {
				line-height: 50px;
				font-size: 13px;
				color: #fff;
				cursor: pointer;
				flex: 1;
				text-align: center;
			}

			.spanDelete {
				height: 50px;
				line-height: 50px;
				font-size: 13px;
				color: #fff;
				cursor: pointer;
				flex: 1;
				text-align: center;
			}
		}
	}
	.banner__upload {
		background: rgba(76, 89, 198, 0.05);
		width: 180px;
		height: 320px;
		margin-bottom: 18px;
		float: left;
		border-radius: 12px;
		flex-wrap: wrap;
		align-items: flex-start;
		border: 1px dashed #4c59c6;
		.bottom-xian {
			height: 45px;
			border-left: 1px dashed #4c59c6;
			margin-left: 90px;
			line-height: 45px;
			font-size: 10px;
			color: #4c59c6;
			padding-left: 4px;
		}
		.tip-box {
			display: flex;
			font-size: 10px;
			text-align: center;
			align-items: center;
			color: #cccccc;
			margin-top: 30px;
			.xian {
				flex: 1;
				border-top: 1px dashed #4c59c6;
				//padding-top: 2px;
				height: 20px;
				line-height: 20px;
				margin-top: 20px;
			}
			.center {
				width: 70px;
				height: 70px;
				border: 1px dashed #4c59c6;
				opacity: 1;
				text-align: center;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				//padding: 12px;
				box-sizing: border-box;
				//align-items: center;
				line-height: 14px;
				flex-wrap: wrap;
				padding-top: 8px;
				> div {
					width: 100%;
					margin-top: 6px;
				}
			}
		}
		.icon-box {
			font-size: 50px;
			text-align: center;
			width: 100%;
			color: #cccccc;
			i {
				padding-top: 40px;
			}
		}
		.text-box {
			color: #cccccc;
			text-align: center;
			width: 100%;
			font-size: 16px;
			margin-top: 14px;
		}
		.text-rule {
			color: #f14a46;
			margin-top: 38px;
			font-size: 12px;
			text-align: center;
		}
	}
}
</style>
